<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../js/layui/css/layui.css">
<script type="text/javascript" src="../js/layui/layui.js"></script>
</head>
<body>
	<div id="categoryId" style="display:none">
		<form class="layui-form" id="form_id" lay-filter="form_filter" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">ID</label>
    <div class="layui-input-inline">
      <input type="text" name="id" id="id" lay-verify="title" autocomplete="off" placeholder="请输入ID" class="layui-input">
    </div>
    
  </div>
  <div class="layui-form-item">
  <label class="layui-form-label">分类名称</label>
    <div class="layui-input-inline">
      <input type="text" name="name" id="name" lay-verify="title" autocomplete="off" placeholder="请输入名称" class="layui-input">
    </div>
   </div>
   <div class="layui-form-item">
    <div class="layui-input-block">  
      <button type="submit" class="layui-btn" id="tiJiaoId" lay-submit="" lay-filter="xiuGai">立即提交</button>
      
    </div>
  </div>
</form>
	</div>
    <button onclick="addCategory()" type="button" class="layui-btn">
      <i class="layui-icon">&#xe608;</i> 添加
    </button>
	<script type="text/html" id="barDemo">
 		<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
 		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>

	<table id="demo" lay-filter="test"></table>
 
<script>
	var form,layer,table,$;
	layui.use(['table','form','layer'], function(){
	   table = layui.table;
	   form = layui.form;
	   layer = layui.layer;
	   $ = layui.$;
	  //第一个实例
	  table.render({
	    elem: '#demo'
	    ,limit:3
	    ,id:'productCategoryTable'
	    ,url: '../getCates' //数据接口
	    ,page: true //开启分页
	    ,cols: [[ //表头
	      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
	      ,{field: 'name', title: '分类名称'}
	      ,{title:'操作',fixed: 'right', width:200, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
	    ]]
	  });
	  
	  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
		  console.log(obj)
		  var data = obj.data; //获得当前行数据
		  var id = data.id
		  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
		  
		  if(layEvent === 'detail'){ //查看
			  $("#tiJiaoId").hide()
			  form.val("form_filter",data)
			  	layer.open({
			  		type:1,
			  		content:$("#categoryId"),
			  		area:['400px','200px']
			  	})
		  } else if(layEvent === 'del'){ //删除
		    layer.confirm('真的删除行么', function(index){
		     
		      $.post("../deCategory",{
		    	  id:id
		      },function(res){
		    	 if(res.code=="0"){
		    		 layer.msg(res.msg);
		    		 table.reload("productCategoryTable");
		    	 }
		      },"json")
		      
		    });
		  } else if(layEvent === 'edit'){ //编辑
		    //do something
		    $("#form_id")[0].reset()
		    $("#tiJiaoId").show()
		    form.val("form_filter",data)
		  	layer.open({
		  		type:1,
		  		content:$("#categoryId"),
		  		area:['400px','250px']
		  	})
		  	
		  } else if(layEvent === 'LAYTABLE_TIPS'){
		    layer.alert('Hi，头部工具栏扩展的右侧图标。');
		  }
		});
	  form.on('submit(xiuGai)', function(data){
		console.log(data)
		$.post("../upCategory",$("#form_id").serialize(),function(res){
			layer.msg(res.msg)
			layer.closeAll()
			table.reload("productCategoryTable");
		},"json")
		  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});
	  
	
	});
	function addCategory(){
		$("#tiJiaoId").show()
		$("#form_id")[0].reset()
		layer.open({
	  		type:1,
	  		content:$("#categoryId"),
	  		area:['400px','250px']
	  	})
	  	form.on('submit(xiuGai)', function(data){
			$.post("../addCategory",$("#form_id").serialize(),function(){
				layer.msg(res.msg)
				layer.closeAll()
				table.reload("productCategoryTable");
			},"json")
			});
	}
</script>
</body>
</html>